<%--
  Created by IntelliJ IDEA.
  User: 羡羡
  Date: 2021/6/26
  Time: 10:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>留言板</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-family: Microsoft YaHei, Arial, Helvetica, sans-serif;
        }

        .cls {
            clear: both;
        }

        .container {
            width: 780px;
            min-height: 10px;
            margin: 50px auto;
            /* border: 1px solid #dfdfdf; */
        }

        .comment {
            min-height: 60px;
            /* border: 1px solid red; */
        }

        .comment-avatar img {
            margin: 20px 0 0 20px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
        }

        .comment-content {
            float: right;
            width: 685px;
            padding-top: 15px;
            border-top: 1px solid #dfdfdf;
        }

        comment-bottom > .comment-content {
            border-bottom: 1px solid #dfdfdf;
        }

        comment-content-name {
            color: #6d757a;
            font-size: 12px;
            margin-bottom: 5px;
        }

        .comment-content-article {
            font-size: 14px;
            margin-bottom: 10px;
        }

        .comment-content-footer {
            color: #6d757a;
            font-size: 12px;
            margin-bottom: 15px;
        }

        .comment-content-footer span {
            margin-right: 10px;
        }


        .comment-send {
            position: relative;
            margin-bottom: 30px;
        }

        .comment-send-input {
            outline: none;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            transition: all 0.3s;
            position: absolute;
            top: 15px;
            left: 95px;
            resize: none;
            width: 605px;
            height: 65px;
            padding: 10px;
            border-radius: 4px;
            background: #f4f5f7;
            border: 1px solid #e5e9ef;
        }

        .comment-send-input:hover, .comment-send-input:active {
            background: #fff;
            color: #555;
        }

        .comment-send-button {
            border: none;
            cursor: pointer;
            user-select: none;
            -moz-user-select: none;
            transition: all 0.3s;
            position: absolute;
            top: 15px;
            right: 0px;
            width: 65px;
            height: 65px;
            border-radius: 4px;
            background: #1aa2d4;
            color: #fff;
            font-size: 14px;
            text-align: center;
        }

        .comment-send-button:hover {
            background: #1eb6e3;
        }

    </style>
    <script>
        function de(id) {
            location.href="MessageServlet/delemessage?id="+id;
        }
    </script>
</head>
<body>
<div class="container">
    <div class="comment-send">
        <form id="commentForm" method="post" action="MessageServlet/addmessage">
                 <span class="comment-avatar">
                     <%
                     String img= (String) request.getSession().getAttribute("img");
                     String name= (String) request.getSession().getAttribute("uname");
                     %>
                     <img src="/LeaveMessage/images/<%=img%>" alt="avatar">
                </span>
            <textarea class="comment-send-input" name="comment" form="commentForm" cols="80" rows="5"
                      placeholder="请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。"></textarea>
            <input class="comment-send-button" type="submit" value="发表评论">
        </form>
    </div>
    <div class="comment-list" id="commentList">
        <c:forEach items="${lylist}" var="ly">
            <div class="comment">
                 <span class="comment-avatar">
                     <img src="/LeaveMessage/images/${ly.head}" alt="avatar">
                 </span>
                <div class="comment-content">
                    <p class="comment-content-name">${ly.name}</p>
                    <p class="comment-content-article">${ly.content}</p>
                    <p class="comment-content-footer">
                        <span class="comment-content-footer-device">来自安卓客户端</span>
                        <span class="comment-content-footer-timestamp">${ly.time}</span>
                        <c:set var="na" value="<%=name%>"></c:set>
                        <c:if test="${ly.name==na}">
                            <span class="comment-content-footer-id" style="cursor:pointer;" onclick="de(${ly.id})">删除</span>
                        </c:if>
                    </p>
                </div>
                <div class="cls"></div>
            </div>
        </c:forEach>
    </div>
</div>
</body>
</html>
